<script setup lang="ts">
import { computed } from "vue";

export interface schemaItem {
  field: string;
  label: string;
}

defineOptions({
  name: "TestingAbout"
});

const { pkg, lastBuildTime } = __APP_INFO__;
const { name, version, engines, dependencies, devDependencies } = pkg;

const schema: schemaItem[] = [];
const devSchema: schemaItem[] = [];

const words = [
  "@pureadmin/utils",
  "@vueuse/core",
  "axios",
  "dayjs",
  "echarts",
  "vue",
  "element-plus",
  "naive-ui",
  "pinia",
  "vue-i18n",
  "vue-router",
  "@iconify/vue",
  "@vitejs/plugin-vue",
  "@vitejs/plugin-vue-jsx",
  "eslint",
  "prettier",
  "sass",
  "stylelint",
  "tailwindcss",
  "typescript",
  "vite",
  "vue-tsc"
];

const getMainLabel = computed(
  () => (label: string) => words.find(w => w === label) && "main-label"
);

Object.keys(dependencies).forEach(key => {
  schema.push({ field: dependencies[key], label: key });
});

Object.keys(devDependencies).forEach(key => {
  devSchema.push({ field: devDependencies[key], label: key });
});
</script>

<template>
  <div>
    <el-card class="m-4 box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-medium">平台信息</span>
        </div>
      </template>
      <el-descriptions border size="small" :column="4">
        <el-descriptions-item
          label="系统名称"
          class-name="pure-version"
          label-align="right"
          label-width="150px"
          width="300px"
        >
          {{ name }}
        </el-descriptions-item>
        <el-descriptions-item
          label="当前版本"
          class-name="pure-version"
          label-align="right"
          label-width="150px"
          width="300px"
        >
          {{ version }}
        </el-descriptions-item>
        <el-descriptions-item
          label="最后编译时间"
          class-name="pure-version"
          label-align="right"
          label-width="150px"
          width="300px"
        >
          {{ lastBuildTime }}
        </el-descriptions-item>
        <el-descriptions-item
          label="推荐 node 版本"
          class-name="pure-version"
          label-align="right"
          label-width="150px"
          width="300px"
        >
          {{ engines.node }}
        </el-descriptions-item>
        <el-descriptions-item
          label="查看源码"
          class-name="pure-version"
          label-align="right"
          label-width="150px"
          :span="4"
        >
          <a
            class="underline!"
            href="https://gitee.com/darkwinoom/vue3-admin-electron-scaffold"
            target="_blank"
          >
            查看完整版源码
          </a>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="m-4 box-card" shadow="never">
      <template #header>
        <div class="card-header flex items-center">
          <span class="font-medium">生产环境依赖</span>
          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
            {{ schema.length }}
          </el-tag>
        </div>
      </template>
      <el-scrollbar>
        <el-descriptions border size="small" :column="6">
          <el-descriptions-item
            v-for="(item, index) in schema"
            :key="index"
            :label="item.label"
            :label-class-name="getMainLabel(item.label)"
            class-name="pure-version"
            label-align="right"
          >
            <a
              :href="'https://www.npmjs.com/package/' + item.label"
              target="_blank"
            >
              <span
                :class="getMainLabel(item.label)"
                style="color: var(--el-color-primary)"
              >
                {{ item.field }}
              </span>
            </a>
          </el-descriptions-item>
        </el-descriptions>
      </el-scrollbar>
    </el-card>

    <el-card class="m-4 box-card" shadow="never">
      <template #header>
        <div class="card-header flex items-center">
          <span class="font-medium">开发环境依赖</span>
          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
            {{ devSchema.length }}
          </el-tag>
        </div>
      </template>
      <el-scrollbar>
        <el-descriptions border size="small" :column="5">
          <el-descriptions-item
            v-for="(item, index) in devSchema"
            :key="index"
            :label="item.label"
            :label-class-name="getMainLabel(item.label)"
            class-name="pure-version"
            label-align="right"
          >
            <a
              :href="'https://www.npmjs.com/package/' + item.label"
              target="_blank"
            >
              <span
                :class="getMainLabel(item.label)"
                style="color: var(--el-color-primary)"
              >
                {{ item.field }}
              </span>
            </a>
          </el-descriptions-item>
        </el-descriptions>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.main-label) {
  font-size: 16px !important;
  color: var(--el-color-danger) !important;
}

:deep(.pure-version) {
  font-size: 14px !important;
  font-weight: 600 !important;
  opacity: 0.6;

  &:hover {
    opacity: 1;
  }
}

.main-content {
  margin: 0 !important;
}
</style>
